<template>
  <div class="app-content">
    <h2 style="margin-bottom: 20px">服务端设置</h2>
    <el-timeline style="max-width: 800px">
      <el-timeline-item placement="top">
        <el-card class="mb" shadow="hover">
          <h4 class="mb1">注册小程序</h4>
          <p>
            在官方平台注册开发者账号并创建小程序
            <a href="https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN" target="_blank">
              <el-button type="primary" size="small">前往注册</el-button>
            </a>
          </p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item placement="top">
        <el-card class="mb" shadow="hover">
          <h4 class="mb1">配置小程序授权</h4>
          <dk-form :form-data="formData" />
        </el-card>
      </el-timeline-item>
      <el-timeline-item placement="top">
        <el-card class="mb" shadow="hover">
          <h4 class="mb1">授权完成</h4>
          <div v-if="!authInfo.authorizer_info" class="text-gray">完成小程序授权后会显示授权信息</div>
          <div v-else>
            <el-descriptions :column="1" border>
              <el-descriptions-item label="AppId">{{ authInfo.authorization_info?.authorizer_appid }}</el-descriptions-item>
              <el-descriptions-item label="小程序名">
                <div class="flex items-center">
                  <img :src="authInfo.authorizer_info?.head_img" alt="" class="w-20px" />
                  <span class="ml-2">{{ authInfo.authorizer_info?.nick_name }}</span>
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="简介">{{ authInfo.authorizer_info?.signature }}</el-descriptions-item>
              <el-descriptions-item label="类目">
                <p v-for="(item, key) in authInfo.authorizer_info?.MiniProgramInfo?.categories" :key="key">
                  {{ item.first }} - {{ item.second }}
                </p>
              </el-descriptions-item>
              <el-descriptions-item label="主体">{{ authInfo.authorizer_info?.principal_name }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-timeline-item>
      <el-timeline-item placement="top">
        <el-card class="mb" shadow="hover">
          <h4 class="mb1">上传小程序</h4>
          <p>
            授权配置完成后，可以上传小程序到平台，上传后可以进行小程序的开发和发布
            <el-button type="primary" size="small" @click="jumpToUpload">前往上传</el-button>
          </p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script setup>
import { getAppSettingForm } from '@/api/platform/app/app_setting.js'
import { useRouter } from 'vue-router'
import emitter from '@/utils/mitt'
import { onBeforeUnmount } from 'vue'

const router = useRouter()
const formData = ref(null)
const loading = ref(true)
const appid = ref(getAppid())
const plaid = ref(getPlaid())
const defaultApp = inject('defaultApp')
const authInfo = ref({})

const getAppEditForm = () => {
  getAppSettingForm(plaid.value, defaultApp.value.id, 'server_config')
    .then((res) => {
      formData.value = res.data
      loading.value = false
    })
    .catch((res) => {})
}

const jumpToUpload = () => {
  router.push('/app/upload', {
    query: {
      appid: appid.value,
      plaid: plaid.value
    }
  })
}

// 监听微信授权信息事件
const handleAuthInfo = (data) => {
  authInfo.value = data
}

onMounted(() => {
  getAppEditForm()
  // 订阅微信授权信息事件
  emitter.on('wechat-auth-info', handleAuthInfo)
})

onBeforeUnmount(() => {
  // 移除事件监听，防止内存泄漏
  emitter.off('wechat-auth-info', handleAuthInfo)
})
</script>
<style lang="scss" scoped>
.mb {
  margin-bottom: 10px;
}
</style>
